<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车与订单</title>
    <link href="../css/indexCss.css" rel="stylesheet" type="text/css">
    <!--导入jquery-->
    <script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
    <!--导入官网的axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var username="";

        function $(i) {
            return document.getElementById(i);
        }

        function backMain() {
            window.open("main.html", "_self");
        }

        /* 显示当前用户 */
        function showOrderNow(){
            jQuery.ajax({
                url: 'http://localhost:8081/order/getNow',
                type: 'get',
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function (res) {
                    username = res.info;
                    jQuery("#orderNow").html("<h2>当前用户："+res.info+"</h2>")
                    jQuery("#orderShowTable").click(showOrderTable())
                }
            })
        }

        /* 订单表格信息 */
        function showOrderTable(){
            jQuery.ajax({
                url: 'http://localhost:8081/order/getNowTable',
                type: 'get',
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                data: {
                    "username":username,
                },
                success: function (res) {
                    var ordersTable = res;
                    var orderShowTableInfo = "<tr>\n" +
                        "                <th class=\"orderShowTd\">订单编号</th>\n" +
                        "                <th class=\"orderShowTd\">购买商品</th>\n" +
                        "                <th class=\"orderShowTd\">总价</th>\n" +
                        "                <th class=\"orderShowTd\">地址</th>\n" +
                        "                <th class=\"orderShowTd\">联系方式</th>\n" +
                        "                <th class=\"orderShowTd\">购买日期</th>\n" +
                        "            </tr>";
                    for(var i=0;i<ordersTable.length;i++){
                        var orderShowTrInfo = ordersTable[i];
                        /* 数据格式处理 */
                        orderShowTableInfo += "<tr>\n" +
                            "                <th class=\"orderShowTd2\">"+orderShowTrInfo.id+"</th>\n" +
                            "                <th class=\"orderShowTd2\">"+orderShowTrInfo.goodsAll+"</th>\n" +
                            "                <th class=\"orderShowTd2\">"+orderShowTrInfo.totalPrice+"</th>\n" +
                            "                <th class=\"orderShowTd2\">"+orderShowTrInfo.address+"</th>\n" +
                            "                <th class=\"orderShowTd2\">"+orderShowTrInfo.lxfs+"</th>\n" +
                            "                <th class=\"orderShowTd2\">"+orderShowTrInfo.buyTime+"</th>\n" +
                            "            </tr>";
                    }
                    jQuery("#orderShowTable").html(orderShowTableInfo)
                }
            })
        }

        /* 查看订单 */
        function checkOrder() {
            const order = document.getElementById("order");
            order.style.display = "block";
            //显示订单信息
            jQuery("#orderNow").click(showOrderNow())
        }

        /* 关闭订单页面 */
        function cancelBuy() {
            const order = document.getElementById("order");
            order.style.display = "none";
        }

        var count = 0;
        var buyGoods = [];               //已选择的商品
        var priceAlls = [];                    //总价格

        /* 选中商品 */
        function selectCheck(node) {
            if (node.checked) {
                count++;
                $("count").innerHTML = count;
                buyGoods[buyGoods.length] = jQuery(node).parent().find("h4").html();
                priceAlls[priceAlls.length] = jQuery(node).parent().find("h2").html();
            } else {
                count--;
                $("count").innerHTML = count;
                for (var i = 0; i < buyGoods.length; i++) {
                    if (buyGoods[i] == jQuery(node).parent().find("h4").html()) {
                        buyGoods.splice(i, 1);
                        i--;
                    }
                }
                for (var i = 0; i < priceAlls.length; i++) {
                    if (priceAlls[i] == jQuery(node).parent().find("h2").html()) {
                        priceAlls.splice(i, 1);
                        i--;
                    }
                }
            }
        }

        /* 初始化商品购物车 */
        function getCookie(cookie_name) {
            var allcookie = unescape(document.cookie);
            var cookie_pos = allcookie.indexOf(cookie_name);
            if (cookie_pos !== -1) {
                cookie_pos += cookie_name.length + 1;
                var cookie_end = allcookie.indexOf(";", cookie_pos);
                if (cookie_end === -1) {
                    cookie_end = allcookie.length;
                }
                var value = allcookie.substring(cookie_pos, cookie_end);
            }
            return value;
        }

        /* 购买商品 */
        function buy() {
            if (buyGoods.length != 0) {
                jQuery.ajax({
                    url: 'http://localhost:8081/goods/buy',
                    type: 'post',
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    data: {
                        "names": buyGoods.toString(),
                        "priceAlls": priceAlls.toString()
                    },
                    success: function (res) {
                        if (res.flag) {
                            alert(res.info)
                            location.href="main.html";
                        } else {
                            alert(res.info)
                        }
                    }
                })
            } else {
                alert("购物车请不要留空！")
            }
        }
    </script>
</head>

<body>
<input type="button" onclick="backMain()" value="返回首页">
<!-- 购物车 -->
<div id="mainList">
    <script>
        var dataInex = 0;
        var dataCount = getCookie("count");
        if (dataCount != 1) {
            for (let i = 0; i < (dataCount - 1) / 3; i++) {
                document.write("<div class=\"listRow\">\n" +
                    "        <input class=\"checkBoxes\" type=\"checkbox\" onclick=\"selectCheck(this)\">\n" +
                    "        <div class=\"messageLabel\">\n" +
                    "        <img src=\"" + getCookie("data" + (++dataInex)) + "\" class=\"listImg\"/>\n" +
                    "    <label class=\"listPriceTag\">" + getCookie("data" + (++dataInex)) + "</label>\n" +
                    "    <label class=\"listInformation\">" + getCookie("data" + (++dataInex)) + "</label>\n" +
                    "        </div>\n" +
                    "    </div>");
            }
        } else {
            document.write("<h1 style='text-align: center'>你的购物车空空如也哦！</h1>");
        }
    </script>
</div>

<!-- 订单 -->
<div id="order">
    <div id="orderNow"></div>
    <div id="orderShow">
        <table id="orderShowTable"></table>
    </div>
    <!--<label id="buyPriceTag">123</label>
    <label id="buyInformation">1321</label>-->
    <img src="../imag/cancel.jpg" class="cancelImg" onclick="cancelBuy()">
</div>

<!-- 购买 -->
<div id="buyDiv">
    <input type="button" id="checkList" value="查看订单" onclick="checkOrder()"/>
    <label id="countDiv">
        <h2>你已选中了
            <div id="count">0</div>
            件商品
        </h2>
    </label>
    <input type="button" id="buyList" value="购买" onclick="buy()"/>
</div>
</body>

</html>